import styles from './chart.module.css';
import { BarChart, Bar, Legend } from '@visactor/react-vchart';
import { useState, useRef, useEffect } from 'react';

// const propsData = [ // debug
//   { type: 'oxygen', value: '46.60' },
//   { type: 'silicon', value: '27.72' },
//   { type: 'aluminum', value: '8.13' },
//   { type: 'iron', value: '5' },
//   { type: 'calcium', value: '3.63' },
//   { type: 'sodium', value: '2.83' },
//   { type: 'potassium', value: '2.59' },
//   { type: 'others', value: '3.5' }
// ];



const BarChartCard = ({props}) => {
  const chartRef = useRef(null);
  const [data, setData] = useState([]);

  useEffect(() => {
      setData(props);
  }, [props]);

  useEffect(() => {
    window['vchart'] = chartRef;
  }, []);

//   const handleSwitchData = () => {
//     setData(props);
//   };

  const handleBarClick = params => {
    console.log(params);
  };
  return (
    <div className={`${styles.chartCard} ${styles.square}`}>
        <BarChart
            ref={chartRef}
            data={[{ id: 'id0', values: data }]}
        >
            <Bar
            xField="time"
            yField="value"
            bar={{
                state: {
                    hover: {
                        fill: 'black'
                    }
                }
            }}
            onClick={handleBarClick}
            />
      </BarChart>
    </div>
  );
};

export default BarChartCard;


